<template>
  <div>
    <template v-if="showVerifyCodeModel">
      <verify-code @showVerifyCodeModel="getVerificationData" />
    </template>
    <template v-else>
      <el-form ref="refMsgLogin" :model="MsgLoginVO" :rules="MsgLoginVO_Rules" auto-complete="on" label-position="top">
        <el-form-item label="手机号码" prop="userNameOrEmailAddress">
          <el-input v-model="MsgLoginVO.userNameOrEmailAddress" name="userNameOrEmailAddress" type="text" tabindex="1" auto-complete="on" />
        </el-form-item>
        <el-form-item label="短信验证码" prop="verifyCode">
          <el-input
            v-model.trim="MsgLoginVO.verifyCode"
            class="verifycode_input"
            type="text"
            minlength="4"
            maxlength="4"
            placeholder="验证码"
          />
          <el-button v-if="!isSendMsg" type="text" @click="showVerificationModel">
            {{ $t('register.sendMSG') }}
          </el-button>
          <el-button v-else type="text" class="noClick">
            {{ reSendTime }}(s)
          </el-button>
        </el-form-item>
      </el-form>
      <slot name="MSGLOGIN" />
    </template>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { MsgLoginVO_Rules } from '@/lib/validate/login/index.js';
import { MsgLoginVO } from '@/lib/form/login';
import verifyCode from '@/components/VerifyCode/index';

export default {
  name: 'MobileMsgLogin',
  components: {
    verifyCode
  },
  data() {
    return {
      MsgLoginVO_Rules: new MsgLoginVO_Rules(),
      MsgLoginVO: new MsgLoginVO(),
      showVerifyCodeModel: false, // 控制是否显示验证码,true为显示验证模块
      isSendMsg: false, // 是否已经发送验证码
      reSendTime: 0 // 验证码倒计时
    };
  },
  created() {
    this.MsgLoginVO.userNameOrEmailAddress = this.markTelephone;
  },
  // eslint-disable-next-line vue/order-in-components
  computed: {
    ...mapState({
      markTelephone: state => state.app.markTelephone
    })
  },
  methods: {
    ...mapActions({ setMarkTelephone: 'app/setMarkTelephone' }),
    // 显示验证码模块
    showVerificationModel() {
      // 当校验不通过时phoneError返回值为校验的提示信息，当通过时phoneError的值为空，所以if语句中用(！phoneError）表示校验通过
      this.$refs.refMsgLogin.validateField('userNameOrEmailAddress', (phoneError) => {
        if (!phoneError) {
          this.showVerifyCodeModel = true;
        } else {
          this.showVerifyCodeModel = false;
        }
      });
    },
    // 验证模块返回后调用方法
    getVerificationData(data) {
      console.log(data);
      this.showVerifyCodeModel = data.showVerifyCodeModel;
      // 当人机验证返回验证码正确时
      if (data.isVerifyCode) {
        this.countDownTime(60);
      }
    },
    // 短信倒计时
    countDownTime (num) {
      let timer = null;
      clearInterval(timer);
      this.isSendMsg = true;
      this.reSendTime = num;
      timer = setInterval(() => {
        this.isSendMsg = true;
        this.reSendTime -= 1;
        if (this.reSendTime <= 0) {
          clearInterval(timer);
          this.isSendMsg = false;
        }
      }, 1000);
    },
    routerRedirect() {
      this.setMarkTelephone(this.MsgLoginVO.userNameOrEmailAddress);
      this.$router.push({
        name: 'register',
        query: {
          ReturnUrl: this.$route.query['ReturnUrl']
        },
        params: this.$route.params
      });
    }
  }
};
</script>
